<template>
  <div class="riskDaily-page">
    <h3>风险日报</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'日期'">
        <el-date-picker
          v-model="searchInfo.time"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <!-- 查询结果 -->
    <AreaTitleWarp :title="'风险日报'">
      <el-button v-if="exportShow" type="primary" @click="exportData">导出</el-button>
    </AreaTitleWarp>
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
      >
        <el-table-column prop="expiredTime" label="日期" min-width="90"></el-table-column>
        <el-table-column label="全部">
          <el-table-column prop="expiredNum" label="到期笔数"></el-table-column>
          <el-table-column prop="expireFare" label="到期本金"></el-table-column>
          <el-table-column label="入催笔数">
            <template slot-scope="scope">
              <span>{{scope.row.urgingNum == '-1' ? "--" : scope.row.urgingNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入催本金">
            <template slot-scope="scope">
              <span>{{scope.row.urgingFare == '-1' ? "--" : scope.row.urgingFare}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstExpiredRate" label="首逾率"></el-table-column>
          <el-table-column prop="dpd3" label="DPD3"></el-table-column>
          <el-table-column prop="dpd7" label="DPD7"></el-table-column>
        </el-table-column>
        <el-table-column label="新客">
          <el-table-column prop="expiredNumNew" label="到期笔数"></el-table-column>
          <el-table-column prop="expireFareNew" label="到期本金"></el-table-column>
          <el-table-column label="入催笔数">
            <template slot-scope="scope">
              <span>{{scope.row.urgingNumNew == '-1' ? "--" : scope.row.urgingNumNew}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入催本金">
            <template slot-scope="scope">
              <span>{{scope.row.urgingFareNew == '-1' ? "--" : scope.row.urgingFareNew}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstExpiredRateNew" label="首逾率"></el-table-column>
          <el-table-column prop="dpd3New" label="DPD3"></el-table-column>
          <el-table-column prop="dpd7New" label="DPD7"></el-table-column>
        </el-table-column>
        <el-table-column label="老客">
          <el-table-column prop="expiredNumOld" label="到期笔数"></el-table-column>
          <el-table-column prop="expireFareOld" label="到期本金"></el-table-column>
          <el-table-column label="入催笔数">
            <template slot-scope="scope">
              <span>{{scope.row.urgingNumOld == '-1' ? "--" : scope.row.urgingNumOld}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入催本金">
            <template slot-scope="scope">
              <span>{{scope.row.urgingFareOld == '-1' ? "--" : scope.row.urgingFareOld}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstExpiredRateOld" label="首逾率"></el-table-column>
          <el-table-column prop="dpd3Old" label="DPD3"></el-table-column>
          <el-table-column prop="dpd7Old" label="DPD7"></el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="tableInfo.page"
        :page-size="tableInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
        :page-sizes="[20, 50, 100]"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Data from "../../../assets/js/data.js";
export default {
  data() {
    return {
      searchInfo: {
        time: "",
        page: 1,
        size: 20
      },
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      },
      exportShow: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        time: that.searchInfo.time,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };
      let data = new Data(x);
      let reqData = data.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/dailyReport/risk/query",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        time: "",
        page: 1,
        size: 20
      };
      that.search();
    },
    exportData() {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        time: that.searchInfo.time,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };
      let data = new Data(x);
      let reqData = data.getState();

      let url =
        that.host + "/dailyReport/risk/export?appId=" + that.$store.state.id;
      if (reqData.startTime) {
        url += "&startTime=" + reqData.startTime;
      }
      if (reqData.endTime) {
        url += "&endTime=" + reqData.endTime;
      }
      window.open(url);
    },
    isExportShow() {
      let that = this;
      let isExportShow = that
        .urlPermissions()
        .indexOf("/dailyReport/risk/export");
      if (isExportShow == "-1") {
        that.exportShow = false;
      } else {
        that.exportShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isExportShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.riskDaily-page {
}
</style>
